<template>
	<view class="my-coconut-mine">
		<view class="nav">
			<view class="nav_box" :class="changeIndex==index?'nav_box_active':''" v-for="(item,index) in navList" :key="index" @click="changeNav(index)">
				<text>{{item.value}}</text>
				<view class="nav_line" v-if="changeIndex==index"></view>
			</view>
		</view>
		<view class="list">
			<view class="list_box" v-for="(item,lIndex) in dataList" :key="lIndex">
				<view class="list_box_c">
					<view class="list_box_c_l">
						<view class="status_box" v-if="item.status==2">已核销</view>
						<view class="status_box" v-if="item.status==3">已退款</view>
						<image class="" :src="item.activityImg" mode="aspectFill"></image>
					</view>
					<view class="list_box_c_r">
						<view class="list_box_c_r_title ellipseHide_two">{{item.couponName}}</view>
						<view class="reward_tips" v-if="item.status==2">使用门店：{{item.verificationShopName}}</view>
						<view class="reward_tips" v-if="item.status==3">退款金额：￥{{item.refundMoney}}</view>
						<view class="list_box_c_r_b">
							<view class="time" v-if="item.status==2">核销时间 {{item.verificationTime}}</view>
							<view class="time" v-if="item.status==3">退款时间 {{item.refundTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no_info" v-if="dataList.length==0">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		couponPlatformList,
	} from '@/api/sy.js'
	export default {
		data() {
			return {
				changeIndex: 0,
				navList:[
					{ id:'1',value:'已使用' },{ id:'2',value:'已退款' }
				],
				status:'2',//状态 shenye_customer_coupon_status 1 待使用 2 已核销 3 已退款 4 已过期
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				dataList:[], //平台订单列表
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			changeNav(index){ //类型选择
				this.changeIndex = index
				if(index==0){
					this.status = 2
				}else{
					this.status = 3
				}
				this.pageNum = 1
				this.getList()
			},
			async getList() { //获取平台订单列表
				uni.showLoading({ title:'加载中' })
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					status: this.status
				}
				try{
					const res = await couponPlatformList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
					this.dataList.forEach((item)=>{
						item.ruleShow = false
					})
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getList()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F7F9;
	}
	view{
		box-sizing: border-box;
	}
	.my-coconut-mine{
		padding-bottom: 100rpx;
	}
	.nav{
		display: flex;
	}
	.nav_box{
		padding-top: 22rpx;
		height: 88rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #555555;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% / 2);
	}
	.nav_line{
		width: 60rpx;
		height: 4rpx;
		/* background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%); */
		background-color: #0B87F2;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.nav_box_active{
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}
	.list{
		padding: 40rpx 30rpx;
	}
	.list_box{
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx #E4E4E4;
		border-radius: 20rpx;
		padding: 30rpx 24rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.list_box_c{
		display: flex;
	}
	.list_box_c_l{
		width: 196rpx;
		height: 196rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		position: relative;
	}
	.list_box_c_l image{
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		opacity: 0.5;
	}
	.status_box{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.list_box_c_r{
		flex: 1;
	}
	.list_box_c_r_title{
		width: 408rpx;
		font-size: 30rpx;
		color: #222222;
		margin-top: 8rpx;
		font-weight: 400;
	}
	.reward_tips{
		color: #444444;
		font-size: 26rpx;
		margin: 12rpx 0;
	}
	.list_box_c_r_b{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.time{
		font-size: 24rpx;
		color: #989898;
	}
	.use_button{
		width: 124rpx;
		height: 44rpx;
		border-radius: 100rpx;
		background: linear-gradient(92.26deg, #FF7461 6.48%, #FF4219 98.53%);
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		text-align: center;
	}
	.use_button:active{
		opacity: 0.8;
	}
	.no_info{
		padding-top: 280rpx;
		padding-bottom: 60rpx;
	}
</style>
